<template>
	<div class="box" v-show="show">
		<div class="box-content">
			<div class="box-del">
				<div style="flex: 1;"></div>
				<img src="@/assets/images/del.png" alt="" @click="show = false">
			</div>
			<div class="box-title">
				<div>
					<div class="box-title-left">实名认证</div>
					<div>只有实名认证的学员才能拥有更多权限</div>
				</div>
				<img src="@/assets/images/shield.png" alt="" class="box-title-img">
			</div>
			<div class="box-content-list">
				<el-form ref="formRef" :model="form" :rules="rules" label-position="top">
					<el-form-item label="真实姓名" prop="realName" required>
						<el-input v-model="form.realName" placeholder="请输入姓名" :disabled="user_type != 0" />
					</el-form-item>
					<el-form-item label="身份证号码" prop="idCard" required>
						<el-input v-model="form.idCard" placeholder="请输入身份证号" />
					</el-form-item>
					<div>
						<el-checkbox v-model="form.remember">本人确认以上信息都是真实及有效的，因未提供真实及有效信息产生的一切法律后果由本人承担</el-checkbox>
					</div>
					<el-form-item class="flex mgt">
						<div style="flex: 1;"></div>
						<el-button link @click="show = false">跳过</el-button>
						<el-button type="primary" @click="saveVerificationClick">提交</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { userApi } from '@/api/modules/user.js'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'
const formRef = ref(null)
const show = ref(false)

const userStore = useUserStore()

const { user_type, name } = userStore.userInfo

const someMethod = (param) => {
	show.value = param
};
defineExpose({ someMethod });
const form = reactive({
	realName: user_type == 0 ? '' : name,
	idCard: '',
	remember: false
})

// 身份证号码验证规则
const validateIdCard = (rule, value, callback) => {
	const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
	if (!value) {
		callback(new Error('请输入身份证号码'))
	} else if (!reg.test(value)) {
		callback(new Error('请输入正确的身份证号码'))
	} else {
		callback()
	}
}

// 姓名验证规则
const validateName = (rule, value, callback) => {
	const reg = /^[\u4e00-\u9fa5]{2,4}$/
	if (!value) {
		callback(new Error('请输入真实姓名'))
	} else if (!reg.test(value)) {
		callback(new Error('请输入2-4个汉字'))
	} else {
		callback()
	}
}

const rules = {
	realName: [
		{ required: true, message: '请输入真实姓名', trigger: 'blur' },
		{ validator: validateName, trigger: 'blur' }
	],
	idCard: [
		{ required: true, message: '请输入身份证号码', trigger: 'blur' },
		{ validator: validateIdCard, trigger: 'blur' }
	]
}

const saveVerificationClick = async () => {
	try {
		await formRef.value.validate()
		if (!form.remember) {
			ElMessage.error('请勾选后再进行提交');
			return
		}
		const data = await userApi.studentVerification({
			name: form.realName,
			id_card: form.idCard
		});
		ElMessage.success('认证提交成功')
		show.value = false
	} catch (error) {

	}
}
</script>

<style lang="scss" scoped>
.box {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	cursor: pointer;
	z-index: 999;

	.mgt {
		margin-top: 24px;
	}

	.box-content {
		margin: 200px auto 0;
		width: 560px;
		height: 544px;
		background: linear-gradient(180deg, #33A0FF 0%, #F5F5F5 100%);
		border-radius: 8px 8px 8px 8px;
		box-sizing: border-box;
		padding: 24px;

		.box-del {
			display: flex;
		}

		.box-content-list {
			height: 336px;
			background: #FFFFFF;
			border-radius: 8px 8px 8px 8px;
			margin-top: 40px;
			z-index: 999 !important;
			position: relative;
			box-sizing: border-box;
			padding: 24px;

			:deep(.el-input__inner) {
				height: 36px;
			}
		}

		.box-title {
			font-family: MiSans, MiSans;
			font-weight: 500;
			font-size: 16px;
			color: #FFFFFF;
			line-height: 24px;
			text-align: left;
			font-style: normal;
			text-transform: none;
			position: relative;

			.box-title-img {
				position: absolute;
				top: 0;
				right: 0;
				width: 159px;
				height: 160px;
				z-index: 0;
			}

			.box-title-left {
				font-size: 24px;
				color: #FFFFFF;
				line-height: 32px;
				text-align: left;
				padding-bottom: 8px;
			}
		}

	}
}

:deep(.el-checkbox__label) {
	white-space: normal;
	font-family: MiSans, MiSans;
	font-weight: 400;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.65);
	line-height: 22px;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.box-content-list {
	:deep(.el-form-item) {
		margin-bottom: 24px;

		.el-form-item__label {
			padding: 0;
			line-height: 20px;
			color: rgba(0, 0, 0, 0.85);
			font-size: 14px;
			margin-bottom: 8px;

			// 必填星号样式
			&::before {
				content: '*';
				color: #ff4d4f;
				margin-right: 4px;
			}
		}

		.el-input {
			height: 40px;

			.el-input__inner {
				height: 40px;
			}
		}
	}
}
</style>
